《着色器语言GLSL ES文档》

文档的阐述侧重于总结，把偏重于记忆性的东西总结出来，各类编程语言大同小异，本文档默认大家有计算机语言基础，比如变量、数据类型、结构体是对什么的抽象，在语言预处理、编译时起什么作用。

一、概述

着色器语言GLSL ES语法类似高级语言C语言，编程时需要定义变量的数据类型，属于强类型语言，运行在GPU中，可以结合WebGL 在浏览器中展现模拟3D世界。

变量、常量、函数、语句块名字命名，也就是着色器语言GLSL ES标识符的命名规则

三、GLSL ES 1.0关键字

in	const	vec2	bvec2	if	do	highp
out	TRUE	vec3	bvec3	else	void	medium
inout	FALSE	vec4	bvec4	return	while	struct
attribute	float	ivec2	mat2	continue	sampler2D	lowp
varying	int	ivec3	mat3	for	samplerCubebe	precision
uniform	bool	ivec4	mat4	break	invariant	discard

运算符	意义	案例
+、-、*、/	加减乘除	运算优先级和数学一样
++、--	自增、自减	i++; //语句执行一次变量i本身加一
=	赋值	int a; a=10; //把整数10赋值给变量a
+=、-=、*=、/=	算术赋值	int a=2; a+=10; //整数a加上10得出12，把计算结果在赋值给a
<、>、<=、>=	与数学表达意思相同	比较结果返回布尔值 int a=10; int b=20; if(a<b){ a++; } // a小于b，返回true，if里面的语句会执行，否则不会执行
==、!=	比较	if(a==b); //判断a与b是否相等 if(a！=b); //判断a与b是否不相等

声明定义的是常量，不再改变。

//const定义标识符PI代表圆周率

const float PI = 3.1415926;

代码案例

    int r = 10;//定义半径
    int s
    s = PI*r*r;//PI代入公式求解面积，可以避免每次书写3.1415926。

attribute

类型数组构造对象创建的数据可以通过WebGL Javascript API传递给attribute定义的顶点着色器变量

用于声明顶点着色器坐标、颜色、纹理坐标属性的变量。attribute用在顶点着色器中用于全局变量的声明，不能用在片元着色器中，也不能在顶点着色器中声明局部变量。

//声明全局变量a_pos(4个浮点数的向量数据)
```
attribute vec4 a_pos;
```
//在顶点着色器main主程序中把变量a_pos中的顶点信息赋值给顶点位置内置变量gl_Position
```
            void main(){
            gl_Position = a_pos;
            }
    
```
uniform

可以在顶点着色器和片元着色器中定义变量，要求以全局方式声明变量，顶点着色器和片元着色器可以共享同名字的uniform变量，uniform定义的是顶点共用数据，与逐顶点attribute变量不同，比如一个三维模型发生旋转，所有模型的顶点都会发生一样的旋转，这时候就可以用uniform定义旋转变换矩阵变量，平移同样道理。

声明矩阵变量u_ViewMatri
```
uniform mat4 u_ViewMatrix
```
varying

在顶点着色器和片元着色器中同时用varying声明同名变量，就可以实现顶点着色器向片元着色器传递数据的任务，比如一个几何体的区域颜色与几何的位置相关，顶点着色器从js代码中获得颜色逐顶点数据后再传递给片元着色器

在顶点着色器编程阶段使用,代码位于main函数里面，可以在main函数里面利用vec4等构造函数直接定义参数，也可以把attribute定义的全局变量赋值给内置变量

开发业余时间，会不定期更新，同时完善总结不到位的内容，如果那些内容不够完善，大家可以加QQ群提出来，WebGL和three.js交流群：187740169，